<template>
<view class="body">
    <view class="head">
        <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014152058_17229.png" class="head-img"></image>
    </view>
    <view class="list">
        <navigator v-for="(item, index) in messageList" :key="index" :url="'/pages/article/detail/detail?citycode=' + citycode + '&type=' + item.pagetype + '&id=' + item.id" class="list-item">
            <view class="left">
                <view class="title">
                    <text>{{item.title}}</text>
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/16/20201016102722_23755.png" class="hot-icon" v-if="index <= 2"></image>
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/15/20201015181924_70946.png" class="hot-icon" v-if="index == 3"></image>
                </view>
                <view class="time">{{item.publictime}}</view>
            </view>
            <view class="right">
                <image :src="item.images" v-if="item.images" class="article-icon"></image>
            </view>
        </navigator>
    </view>
</view>
</template>

<script>
//获取应用实例
const app = getApp();
const util = require("../../utils/util.js");

export default {
  data() {
    return {
      messageList: [],
      citycode: ""
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    util.getUrl(app.globalData.url).then(res => {
      this.setData({
        citycode: uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
      });
      util.request('phb.php', {
        citycode: uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz'
      }, "GET").then(res => {
        if (res.data && res.data.length) {
          this.setData({
            messageList: res.data.splice(0, 20)
          });
        }
      });
    });
  },

  onShareAppMessage() {},

  onShareTimeline() {},

  methods: {}
};
</script>
<style>
.head-img {
    width: 100%;
    height: 222rpx;
    margin-bottom: 48rpx;
}

.list {
    padding: 0 40rpx;
    counter-reset: num;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36rpx;
}

.left {
    margin-right: 40rpx;
}

.list-item .left .title::before {
    counter-increment: num;
    content: counter(num);
    margin-right: 15rpx;
    color: #B6B6B6;
    font-size: 32rpx;
    font-weight: normal;
}

.list .list-item:first-child .left .title:before {
    color: #FE1A29;
}

.list .list-item:nth-child(2) .left .title::before {
    color: #FF893A;
}

.list .list-item:nth-child(3) .left .title::before {
    color: #FFAB3A;
}

.hot-icon {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
    margin-top: 10rpx;
}

.title {
    font-size: 32rpx;
    color: #141414;
    font-weight: 500;
}

.time {
    margin-top: 14rpx;
    font-size: 22rpx;
    color: #989696;
}

.article-icon {
    width: 200rpx;
    height: 144rpx;
    border-radius: 10rpx;
}
</style>